<template>
    <div>
      <el-row class="lock-btn">
        <el-input v-model="queryParams.feedbackPhone" style="width:200px;float: left;margin-left:5px;" clearable placeholder="请输入呼入电话"></el-input>
        <el-input v-model="queryParams.lockMac" style="width:200px;float: left;margin-left:5px;" clearable placeholder="请输入设备编号"></el-input>
        <el-select style="width:200px;float: left;margin-left:5px;" v-model="queryParams.feedbackType" placeholder="请选择类型">
            <el-option key="0" label="全部" :value="全部"></el-option>
            <el-option v-for="feedbackType in feedbackTypes" v-bind:key="feedbackType.id" :label="feedbackType.name" :value="feedbackType.name"></el-option>
          </el-select>
        <el-input v-model="queryParams.feedbackDetails" style="width:200px;float: left;margin-left:5px;" clearable placeholder="请输入反馈详情"></el-input>

        <el-button style="margin-left: 0.6%;margin-top: 0.2%;" size="medium" type="primary" @click="queryBtn" round>搜索</el-button>
        <el-button style="margin-left: 0.6%;margin-top: 0.2%;" size="medium" type="primary" @click="addBtn" round>添加</el-button>
      </el-row>
     
      <el-row style="box-shadow: rgb(205 205 205) 1px 1px 8px;">
        <el-col :span="24">
          <el-table :header-cell-style="{ background: '#ecf3fd',color:'#000000' }" highlight-current-row  ref="lcredepositrequestTable" v-loading="loading" :data="list" :stripe="true" :row-key="'id'" :max-height="clientHeight" :height="clientHeight" @selection-change="handleTableChange">
            <el-table-column prop="feedbackPhone" label="呼入电话" width="120"  align="center">
            </el-table-column>
            <el-table-column prop="lockMac" label="设备编号" width="120" align="center">
            </el-table-column>
                
            <el-table-column prop="lockName" label="设备名称" width="160" align="center">
            </el-table-column>
            <el-table-column prop="feedbackType" label="反馈类型" width="80" align="center">
            </el-table-column>
           
            <el-table-column prop="disposePlan" label="处置方案" width="" align="center">
            </el-table-column>
            <el-table-column prop="disposeResult" label="处置结果" width="120" align="center">
              <template slot-scope="{ row }">
              <el-tag
            v-if="row.disposeResult == '已处理'"
            size="medium"
            type="parimary"
            effect="dark"
            style="font-size: 14px"
            >已处理</el-tag
          >
          <el-tag
           v-else-if="row.disposeResult == '未处理'"
            size="medium"
            type="danger"
            effect="dark"
            style="font-size: 14px"
            >未处理</el-tag
          >
          <el-tag
            v-else-if="row.disposeResult == '已告知'"
            size="medium"
            type="success"
            effect="dark"
            style="font-size: 14px"
            >已告知</el-tag
          >
          <el-tag
            v-else-if="row.disposeResult == '已完成'"
            size="medium"
            type="info"
            effect="dark"
            style="font-size: 14px"
            >已完成</el-tag
          >
          <el-tag
            v-else-if="row.disposeResult == ''"
            effect="dark"
            style="display:none"
            ></el-tag
          >
       
          <el-tag v-else size="medium" type="Info" style="font-size: 14px">{{
            row.disposeResult
          }}</el-tag>
          </template>
            </el-table-column>

            
            
            <el-table-column prop="feedbackDetails" label="反馈详情" width="" align="center">
            </el-table-column>
            <el-table-column prop="feedbackTime" label="反馈时间" sortable width="100" align="center">
            </el-table-column>
            <el-table-column prop="faultNo" label="工单号" width="120" align="center">
            </el-table-column>
            <el-table-column prop="phoneOperator" label="接线员" width="120" align="center">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" sortable width="100" align="center">
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="" align="center">
                <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="editBtn(scope.$index, scope.row)"
                title="修改"
                >修改</el-button>
                <!-- <el-button
                size="mini"
                type="warning"
                @click="editBtn2(scope.$index, scope.row)"
                title="设备上报"
                >设备上报</el-button> -->

                <router-link v-if="scope.row.lockMac != ''" :to="{ path: '/index/mp/lockManager',query:{faultNo:scope.row.faultNo,lockMac:scope.row.lockMac,lockName:scope.row.lockName,feedbackDetails:scope.row.feedbackDetails}}">
              <el-button
                size="mini"
                type="warning"
                @click="editBtn2(scope.$index, scope.row)"
                title="上报"
                >上报处理</el-button
              >
            </router-link>

   
              <el-button
              v-if="scope.row.lockMac == ''"
                size="mini"
                type="info"
                title="上报"
                >上报处理</el-button
              >




            </template>
          </el-table-column>
            
  
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="page-tool">
          <el-pagination layout="total,sizes,prev, pager,next,jumper" :page-size="pageSize" :total="total" :page-sizes="[10, 20, 30, 40, 100]" @size-change="handlePageChange" @current-change="handleNoChange">
          </el-pagination>
        </el-col>
      </el-row>



  
  
     
      <el-dialog title="添加记录"  :visible.sync="addVisible" :width="'722px'">
        <el-form :rules="rules" :model="form" ref="form" >

          <el-row>
         <el-col :span="11">
          <el-form-item label="工单号" :label-width="labelWidth" prop="faultNo">  
                 <el-input disabled v-model="form.faultNo"></el-input>
          </el-form-item>
        </el-col>
       
        </el-row>

         <el-row>
         <el-col :span="11">
          <el-form-item label="呼入电话" :label-width="labelWidth" prop="feedbackPhone">  
                 <el-input v-model="form.feedbackPhone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="设备编号"  :label-width="labelWidth">
            <template>
                 <el-input v-model="form.lockMac">
                 </el-input>
            </template>
          </el-form-item>
        </el-col>
        </el-row>

        <el-row>
        <el-col :span="11">
          <el-form-item prop="feedbackType" label="反馈类型" :label-width="labelWidth">
            <template>
          <el-select v-model="form.feedbackType" placeholder="请选择类型">
            <el-option v-for="feedbackType in feedbackTypes" v-bind:key="feedbackType.id" :label="feedbackType.name" :value="feedbackType.name"></el-option>
          </el-select>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item prop="feedbackTime" label="反馈时间" :label-width="labelWidth">  
            <el-date-picker
                v-model="form.feedbackTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期">
                </el-date-picker>
          </el-form-item>
        </el-col>
        </el-row>

        <el-row>
         <el-col :span="22">
          <el-form-item prop="feedbackDetails" label="反馈详情" :label-width="labelWidth">  
                 <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="form.feedbackDetails"></el-input>
          </el-form-item>
        </el-col>
        </el-row>

        <el-row>
         <el-col :span="22">
          <el-form-item  label="处置方案" :label-width="labelWidth">  
                 <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="form.disposePlan"></el-input>
          </el-form-item>
        </el-col>
        </el-row>

      

        <el-row>
         <el-col :span="22">
          <el-form-item prop="disposeResult" label="处置结果" :label-width="labelWidth">  
             
                 <el-select style="width:200px;margin-left:5px;"  v-model="form.disposeResult" placeholder="选择是否处理">
            <el-option key="0" label="未处理" :value="'未处理'"></el-option>
            <el-option key="1" label="已处理" :value="'已处理'"></el-option>
          </el-select>
          </el-form-item>
        </el-col>
        </el-row>

       


        <!-- <el-row>
         <el-col :span="22">
          <el-form-item label="备注" :label-width="labelWidth">  
                 <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="form.feedbackNotes"></el-input>
          </el-form-item>
        </el-col>
        </el-row> -->

        <el-row>
         <el-col :span="11">
          <el-form-item label="创建时间" :label-width="labelWidth">  
                 <el-input disabled v-model="form.createTime"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="接线员" :label-width="labelWidth">
            <template>
                 <el-input disabled v-model="form.phoneOperator">
                 </el-input>
            </template>
          </el-form-item>
        </el-col>
        </el-row>




        </el-form>
       <div slot="footer" class="dialog-footer">
          <el-button @click="addVisible = false">取 消</el-button>
          <el-button type="primary" @click="lc400feedbackPost()">添加</el-button>
        </div>
      </el-dialog>





      <el-dialog title="修改记录" :visible.sync="updateVisible" :width="'722px'">
        <el-form :model="updateVisiblelist" ref="updateVisiblelist" >

          <el-row>
         <el-col :span="11">
          <el-form-item label="工单号" :label-width="labelWidth" prop="faultNo">  
                 <el-input disabled v-model="updateVisiblelist.faultNo"></el-input>
          </el-form-item>
        </el-col>
      
        </el-row>

         <el-row>
         <el-col :span="11">
          <el-form-item label="呼入电话" :label-width="labelWidth" prop="feedbackPhone" required>  
                 <el-input disabled v-model="updateVisiblelist.feedbackPhone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="设备编号" :label-width="labelWidth">
            <template>
                 <el-input disabled v-model="updateVisiblelist.lockMac">
                 </el-input>
            </template>
          </el-form-item>
        </el-col>
        </el-row>

        <el-row>
        <el-col :span="11">
          <el-form-item label="反馈类型" :label-width="labelWidth" required>
            <template>
                <el-input disabled v-model="updateVisiblelist.feedbackType"></el-input>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="反馈时间" :label-width="labelWidth" required>  
            <el-input disabled v-model="updateVisiblelist.feedbackTime"></el-input>
            
          </el-form-item>
        </el-col>
        </el-row>

        <el-row>
         <el-col :span="22">
          <el-form-item label="反馈详情" :label-width="labelWidth" required>  
                 <el-input disabled type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="updateVisiblelist.feedbackDetails"></el-input>
          </el-form-item>
        </el-col>
        </el-row>

        <el-row>
         <el-col :span="22">
          <el-form-item label="处置方案" :label-width="labelWidth">  
                 <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="updateVisiblelist.disposePlan"></el-input>
          </el-form-item>
        </el-col>
        </el-row>

        <!-- <el-row>
         <el-col :span="22">
          <el-form-item label="处置结果" :label-width="labelWidth">  
                 <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="updateVisiblelist.disposeResult" ></el-input>
          </el-form-item>
        </el-col>
        </el-row> -->


        <el-row>
         <el-col :span="22">
          <el-form-item prop="disposeResult" label="处置结果" :label-width="labelWidth">  
             
                 <el-select style="width:200px;margin-left:5px;"  v-model="updateVisiblelist.disposeResult" placeholder="选择是否处理">
            <el-option key="0" label="未处理" :value="'未处理'"></el-option>
            <el-option key="1" label="已处理" :value="'已处理'"></el-option>
          </el-select>
          </el-form-item>
        </el-col>
        </el-row>




        <!-- <el-row>
         <el-col :span="22">
          <el-form-item label="备注" :label-width="labelWidth">  
                 <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="updateVisiblelist.feedbackNotes"></el-input>
          </el-form-item>
        </el-col>
        </el-row> -->

        <el-row>
         <el-col :span="11">
          <el-form-item label="创建时间" :label-width="labelWidth">  
                 <el-input disabled v-model="updateVisiblelist.createTime"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="接线员" :label-width="labelWidth">
            <template>
                 <el-input disabled v-model="updateVisiblelist.phoneOperator">
                 </el-input>
            </template>
          </el-form-item>
        </el-col>
        </el-row>

        </el-form>
       <div slot="footer" class="dialog-footer">
          <el-button @click="updateVisible = false">取 消</el-button>
          <el-button type="primary" @click="lc400feedbackupdate()">修改</el-button>
        </div>
      </el-dialog>

  
  </div>
  </template>
  
  <script>
   
  import { getNickName, getTestUserName,getRoleCode } from "../../util/auth";
  import { lc400feedbackApi,lc400feedbackPostApi,lc400feedbackupdateApi } from "../../api/400.js";

  
  export default {
    name: "oplog",
    data: function () {
      return {
        clientHeight:
          Math.max(
            document.documentElement.scrollHeight,
            document.body.scrollHeight
          ) -
          132 -
          5 +
          10 -
          28,
        labelWidth: "100px",
        loading: false,
        dialogTitle: "",
        pageNo: 1,
        pageSize:20,
        total: 0,
        updateVisible:false,
        multipleSelection: [],
        dialogFormVisible:false,
        dialogStatus: "",
        addDialog3:false,
        textMap: {
        update: "查看",
         create: "查看",
        },
        feedbackPhone:'',
        lockMac:'',
        lockName:'',
        addVisible:false,
        feedbackType:'',
        feedbackTypes:[
          {id:1,name:'设备故障'},
          {id:2,name:'充电故障'},
          {id:3,name:'资金问题'},
          {id:4,name:'使用问题'},
          {id:5,name:'其他'}
        ], 

        rules2: {
          faultDesc: [
            { required: true, message: '请输入问题描述', trigger: 'blur' }
          ],
          faultSource: [
            { required: true, message: '请输入问题来源', trigger: 'change' }
          ]
      },

        rules: {
          feedbackPhone: [
            { required: true, message: '请输入呼入电话', trigger: 'blur' }
          ],
          feedbackType: [
            { required: true, message: '请输入反馈类型', trigger: 'change' }
          ],
          feedbackDetails: [
            { required: true, message: '请输入反馈详情', trigger: 'blur' }
          ],
          feedbackTime: [
            { required: true, message: '请输入反馈时间', trigger: 'change'}
          ],
          disposeResult: [
            { required: true, message: '请选择是否处理', trigger: 'change'}
          ],
       
      },
      feeForm:'',
      form:{

        feedbackPhone:'',
        lockMac:'',
        feedbackType:'',
        disposePlan:'',
        disposeResult:'',
        feedbackDetails:'',
        feedbackTime:'',
        feedbackNotes:'',
        phoneOperator:'',
        createTime:'',
        faultNo:''

      },
        disposePlan:'',
        pageNo:1,
        pageSize:20,
        updateVisiblelist:{},
        disposeResult:'',
        feedbackDetails:'',
        feedbackTime:'',
        feedbackNotes:'',
        phoneOperator:'',
        createTime:'',
        roleCode:'',
        queryParams:{
            feedbackPhone:null,
            lockMac:null,
            feedbackType:null,
            feedbackDetails:null
        },
        addDialog:false,
        parkfieldList: [],
        status: '',
  
      };
    },
    methods: {
      editBtn (index, row) {
        let _this = this;
        
        _this.updateVisible = true;
        console.log("99999999999",row)
        _this.updateVisiblelist = row;
      },
      editBtn2 (index, row) {
        let _this = this;
        
        // _this.addDialog3 = true;
        // console.log("99999999999",row)
        _this.feeForm = row;
      },

      cancle3(){
      let _this = this;
      _this.addDialog3 = false;
     
    },

      lc400feedbackPost(){
        let _this = this;




// if(_this.feedbackPhone == "" || _this.feedbackPhone == null){
//         this.$alert('请输入呼入电话！', '添加失败', {
//                       confirmButtonText: '确定',});
//                       return false
//                     }else if(_this.feedbackType == "" || _this.feedbackType == null){
//         this.$alert('请输入反馈类型！', '添加失败', {
//                       confirmButtonText: '确定',});
//                       return false
//                     }else if(_this.feedbackDetails == "" || _this.feedbackDetails == null){
//         this.$alert('请输入反馈详情！', '添加失败', {
//                       confirmButtonText: '确定',});
//                       return false
//                     }else if(_this.feedbackTime == "" || _this.feedbackTime == null){
//         this.$alert('请输入反馈时间！', '添加失败', {
//                       confirmButtonText: '确定',});
//                       return false
//                     }

const data = {
        feedbackPhone:_this.form.feedbackPhone == null ? null : _this.form.feedbackPhone.replace(/\s*/g, ""),
        lockMac:_this.form.lockMac,
        feedbackType:_this.form.feedbackType,
        disposePlan:_this.form.disposePlan,
        disposeResult:_this.form.disposeResult,
        feedbackDetails:_this.form.feedbackDetails,
        feedbackTime:_this.form.feedbackTime,
        feedbackNotes:_this.form.feedbackNotes,
        phoneOperator:_this.form.phoneOperator,
        createTime:_this.form.createTime,
        faultNo:_this.form.faultNo
        }

_this.$refs.form.validate((valid) => {
        if (valid) {
          lc400feedbackPostApi(data).then(resp => {

if(resp.errmsg == 'ok'){
    _this.lc400feedback(this.pageNo, this.pageSize);
  _this.$notify({
    title: "添加成功",
    message: "已处理",
    type: "success"
  });
  _this.addVisible = false;
}else{
    _this.$notify({
    title: "添加失败",
    message: "已处理",
    type: "error"
  });
}
})
.catch(resp => {
_this.$notify({
    title: "添加失败",
    message: "已处理",
    type: "error"
  });
})
     
        }
      });
    
        

  
   
         
          
      },



      lc400feedbackupdate(){
        let _this = this;
        const data = {
        disposePlan:_this.updateVisiblelist.disposePlan,
        id:_this.updateVisiblelist.id,
        disposeResult:_this.updateVisiblelist.disposeResult,
        feedbackDetails:_this.updateVisiblelist.feedbackDetails,
        feedbackNotes:_this.updateVisiblelist.feedbackNotes,
        }
        lc400feedbackupdateApi(data).then(resp => {
            if(resp.errmsg == 'ok'){
                _this.lc400feedback(this.pageNo, this.pageSize);
              _this.$notify({
                title: "修改成功",
                message: "已处理",
                type: "success"
              });
              _this.updateVisible = false;
            }else{
                _this.$notify({
                title: "修改失败",
                message: "已处理",
                type: "error"
              });
            }
        })
        .catch(resp => {
            _this.$notify({
                title: "修改失败",
                message: "已处理",
                type: "error"
              });
        })
      },

      localTime(){
        var _this = this;
       var date=new Date();
                var year=date.getFullYear();
                var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
                var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
                var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
                var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
                var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
                // 拼接
                var localTime = year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;

                _this.form.createTime = localTime
      },


      
      
    
      handlePageChange (pageSize) {
        this.pageSize = pageSize;
        this.lc400feedback(this.pageNo, this.pageSize);
      },
      handleNoChange (pageNo) {
        this.pageNo = pageNo;
        this.lc400feedback(this.pageNo, this.pageSize);
      },
      handleTableChange (val) {
        this.multipleSelection = val;
      },
  
      
      lc400feedback(pageNo, pageSize) {
        let _this = this;
        _this.loading = true;
        lc400feedbackApi({
          feedbackPhone:_this.queryParams.feedbackPhone == null ? null : _this.queryParams.feedbackPhone.replace(/\s*/g, ""),
          lockMac:_this.queryParams.lockMac,
          feedbackType:_this.queryParams.feedbackType,
          feedbackDetails:_this.queryParams.feedbackDetails,
          pageNo:pageNo,
          pageSize:pageSize
        }).then(resp => {
            if (resp.errmsg === "ok") {
              console.log(resp.data.dataList);
              _this.total = resp.data.totalNum;
              _this.list = resp.data.dataList;
            }
            setTimeout(() => {
            _this.loading = false;
          }, 1 * 1000);
        });
      },
  
      addBtn(){
        let _this = this;
        _this.addVisible = true;

        _this.form.feedbackPhone = '';
        _this.form.lockMac = '';
        _this.form.feedbackType = '';
        _this.form.disposePlan = '';
        _this.form.disposeResult = '';
        _this.form.feedbackDetails = '';
        _this.form.feedbackTime = '';
        _this.form.feedbackNotes = '';
        _this.form.faultNo = '';


        _this.form.phoneOperator = getNickName();
        _this.localTime();


        const now = new Date()
        let month = now.getMonth() + 1
        let day = now.getDate()
        let hour = now.getHours()
        let minutes = now.getMinutes()
        let seconds = now.getSeconds()
        let randomNumber = now.getFullYear().toString() + month.toString() + day + hour + minutes + seconds
        var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        var randomString = "";
        for (var i = 0; i < 8; i++) {
          var randomIndex = Math.floor(Math.random() * chars.length);
          randomString += chars.charAt(randomIndex);
        }

          _this.form.faultNo = randomNumber + randomString

       


      },
  


      queryBtn() {
        let _this = this;
        _this.loading = true;
          
        lc400feedbackApi({
          feedbackPhone:_this.queryParams.feedbackPhone == null ? null : _this.queryParams.feedbackPhone.replace(/\s*/g, ""),
          lockMac:_this.queryParams.lockMac,
          feedbackType:_this.queryParams.feedbackType,
          feedbackDetails:_this.queryParams.feedbackDetails,
          pageNo:_this.pageNo,
          pageSize:_this.pageSize,
      }).then(resp => {
          _this.total = resp.data.totalNum;
          _this.list = resp.data.dataList;
          _this.loading = false;
        });
      }
    },
    computed: {
      userState () {
        return getNickName() === getTestUserName();
      }
    },
    mounted: function () {
      let _this = this;
      _this.roleCode = getRoleCode()

      
  
      this.$nextTick(function () {
        this.lc400feedback(_this.pageNo, _this.pageSize);
      });
    }
  }
  </script>
  
  <style scoped>
  
  
  
  .page-tool div {
    text-align: right;
  }
  img{
    width: 800px;
    height: 600px;
  }
  
  .lock-btn {
    margin-bottom: 5px;
    margin-top: -10px;
  }
  .operateBtn {
    font-size: 18px;
    width: 32px;
    height: 32px;
    padding: 0;
  }
  </style>